site_8g/src/app/[locale]/(TabBar)/template.tsx

"use client";

import { usePathname } from "@/i18n/routing";
import { AnimatePresence, motion } from "framer-motion";
import { ReactNode, useEffect } from "react";
const routerStack = new Map();
const Template = ({ children }: { children: ReactNode }) => {
    const key = usePathname();

    useEffect(() => {
        if (routerStack.has(key)) {
            routerStack.delete(key);
        } else {
            routerStack.set(key, key);
        }
    }, [key]);
    const isEnter = routerStack.has(key);

    return (
        <AnimatePresence mode="popLayout">
            <motion.div
                layout
                key={key}
                initial={{ x: routerStack.has(key) ? 750 : -750, opacity: 0 }}
                animate={{ x: 0, opacity: 1 }}
                exit={{ x: routerStack.has(key) ? -750 : 750, opacity: 0 }}
                transition={{ duration: 0.3 }}
                className={"h-[100%]"}
            >
                {children}
            </motion.div>
        </AnimatePresence>
    );
};

export default Template;